<template>
	<!--头部-->
  <div>
  	<div class="Headers">
		<div class="top">
			<div class="Headers-center">
				<div class="Headers-left">
					所在城市:&nbsp <a href="">郑州 <i class="city"></i></a>
				</div>
					<ul>
						<li><a href="">登录</a></li>
						<li><a href="">注册</a></li>
						<li class="spacer">|</li>
						<li><a href="">我的订单</a></li>
						<li class="spacer">|</li>
						<li><a href="">我的消息</a></li>
						<li class="spacer">|</li>
						<li><a href="">我是商家</a></li>
						<li class="spacer">|</li>
						<li><a href="">400-800-8820</a></li>
					</ul>
			</div>
			</div>
			<div class="Headers-content">
				<a href=""><img src="../assets/img1/矢量智能对象.png"/></a>
				<div class="search">
					<ul class="ul-first">
						<li><a href="" class="mc">商家</a></li>
						<li><a href="" class="cm">商品</a></li>
					</ul>
					<div class="search-box">
						<input type="text" />
						<button></button>
					</div>
					<ul class="ul-second">
						<li><span>热门:</span></li>
						<li><a href="">烤肉</a></li>
						<li><a href="">麻辣香锅</a></li>
						<li><a href="">美发</a></li>
					</ul>
				</div>
				<ul class="shopping">
					<li><a href=""> <i class="gouwuche"></i> 我的易合 <i class="xiasanjiao"></i> </a></li>
					<li><a href=""><i class="yonghu"></i>购物车<i class="xiasanjiao"></i> </a></li>
				</ul>
			</div>
	</div>
	
	<!--中间-->
	<div class="banner-box">
   		<div class="banner-list">
   		<div class="type" @mouseenter="enter()" @mouseleave="leav()">
   			行业类型
   			<span class="iconfont"></span>
   			 <div class="main-nav" v-show="now">
                    <ul id="nav-list" class="nav-list">
                      <li class="item" v-for="i in options">{{i}}<span></span></li>
                     
                     </ul>
                    <div id="second-nav" class="second-nav">
                    		<ul class="item-list">
                            <li class="item" v-for="i in cooking">
                            	<a href="###" >{{i}}</a>
                            </li>
                        </ul>
					</div>
			  </div>
   		</div>
   		<ul >
   			<li class="list" v-for="i in list">{{i}}</li>
   			<li class="list" id="change">加入易和</li>
   			<li class="list last" @mouseenter="enter1()" @mouseleave="leav1()">
   				在线客服
   			<div class="server" v-show="now1">
              <div class="icon curr"></div>
                <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1362345&amp;site=www.cactussoft.cn&amp;menu=yes" target="_blank" class="qq-server"><i class="icon"></i>QQ客服1</a>
                 <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=23452542&amp;site=www.cactussoft.cn&amp;menu=yes" target="_blank" class="qq-server"><i class="icon"></i>QQ客服2</a>
                 <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=847905297&amp;site=www.cactussoft.cn&amp;menu=yes" target="_blank" class="qq-server"><i class="icon"></i>QQ客服3</a>
                <img alt="" src="http://odho0ke5x.bkt.clouddn.com/goodsimg/1472544377549.jpg" class="qrcode">
                </div>
   			</li>	
   		</ul>
   	</div>	
  </div>
</div>
</template>


<script>
	export default {
//		mounted(){
//       new Swiper('.swiper-container', {
//			    	direction: 'vertical',
//			    loop: true,
//			    autoplay: 1000,
//			    direction:'horizontal',
//			    // 如果需要分页器
//			    pagination: {
//			      el: '.swiper-pagination',
//			      type: 'bullets',
//			    },
//      		})
// 		 },
   		 data () {
   		 	return{
   		 		now:false,
   		 		now1:false,
   		 		list:["首页","精选商家","今日特价","积分商城"],
   		 		options:["餐饮","服饰","娱乐","家具","零售","日化","建材","酒店","旅游","生活服务"],
   		 		cooking:["火锅","自助餐","小吃快餐","日韩料理","西餐","烧烤烧肉","东北菜"],
   		 		cooking1:["烤肉","麻辣香锅","美发","麻辣烫","海鲜","樱桃"]
   		 	}
   		 },
   	 	methods:{	
   	 		enter:function(){
        			this.now = true
        		},
        		leav:function(){
        			this.now = false
        		},
        		enter1:function(){
        			this.now1 = true
        		},
        		leav1:function(){
        			this.now1 = false
        		},
        	
		}
   	 	
   	 }	
	
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	/*@import '../style/swiper.min.css'*/
	body,div,a,h1,h3,input,form,strong,span,select,option,textarea,dl,dt,dd,ul,li,p {
		margin: 0;
		padding: 0;
	}
	body,html,ul,li{
		margin: 0 ;
		padding: 0;
	}
	#app{	
	}
	body,html{
		width: 100%;	
	}
	.top{
		width: 100%;
		height: 33px;
		background-color: rgb(234,234,234);
	}
	.Headers-center{
		width: 1180px;
		height: 33px;
		margin: 0 auto;
		overflow: hidden;
	}
	.Headers-left{
		float: left;
		line-height: 33px;
		color:#666;
		font-size: 12px;
	}
	.Headers-left a{
		color: #666;
		font-size: 14px;
	}
	  a{
		text-decoration: none;
	}
	ul{
		list-style: none;
	}
	  .Headers-center ul{
		
		height: 33px;
		line-height: 33px;
		float: right;
	}
	.city{
		display: inline-block;
		background: url(../assets/img1/_.png) no-repeat;
		width: 15px;
		height: 15px;
		background-position: 1px 9px;
	}
	   .Headers-center ul li a{
		text-decoraation: none;
		color: #666;
		font-size: 12px;
	}
	  .Headers-center ul li{
		float: left;
	}
	 .Headers-center  li:nth-child(1) a{
		margin-right: 10px;
		color: #C81623;
	}
	.spacer{
		color: #ccc;
		margin: 0 10px;
		font-size: 12px;
	}
	 .Headers-center ul li a:hover{
		color: #C81623;
	}
	.Headers-content{
		width: 1180px;
		margin: 0 auto;
		padding: 27px 0 24px;
    		height: 80px;
	}
	.Headers-content>a{
		float: left;
		display: inline-block;
		width: 160px;
    		height: 80px;
    		line-height: 0;
    		margin: 0 213px 0 0
	}
	.search{
		float: left;
		width: 498px;
		height: 80px;
	}
	.ul-first{
		height: 25px;	
	}
	.ul-first li{
		float: left;
	}
	.ul-first li a{
		display: inline-block;
		width: 50px;
		height: 25px;
		font-size: 14px;
    		text-align: center;
    		line-height: 25px;
	}
	.mc{
		background-color: #008CE1;
		color: #fff;
	}
	.cm:hover{
		background-color: #008CE1;
		color: #fff;
	}
	.search-box{
		height: 30px;
    		border: 2px solid #008CE1;
    		position: relative;
	}
	.search-box input{
		height: 30px;
    		line-height: 30px;
    		color: #666;
    		border: 0;
    		font-size: 14px;
    		padding: 0 8px;
    		width: 434px;
	}
	button{
		background: url(../assets/img1/sousuo.png) no-repeat;
		background-position: center center;
		width: 46px;
    		height: 34px;
    		border: 0;
    		background-color: #008CE1;
    		top: -2px;
    		right: -2px;
    		position: absolute;
   		 cursor: pointer;
	}
	.ul-second li{
		float: left;
    		height: 21px;
   		line-height: 25px;
    		margin: 0 10px 0 0;	
	}
	.ul-second li span{
		font-size: 14px;
	}
	.ul-second li a{
		text-decoration: none;
    color: #333;
    font-size: 12px;
	}
	.ul-second li a:hover{
		color: red;
	}
	.shopping{
		float: right;
		margin: 25px 0 0 0;
	}
	.shopping li{
		display: inline-block;
    		border: 1px solid #d3d3d3;
    		background: #f9f9f9;
    		margin: 0 0 0 20px;
    		padding: 0 10px;
    		height: 32px;
    		line-height: 32px;
   		    color: #676767;
    		font-size: 14px;
    		position: relative;
	}
	.gouwuche,.xiasanjiao,.yonghu{
		display: inline-block;
		vertical-align: middle;
	}
	.gouwuche{
   		width: 24px;
   		height: 28px; 		
		background: url(../assets/img1/2-5.png) no-repeat;
		 background-position: 1px 5px; 
	}
	.xiasanjiao{
		background: url(../assets/img1/下三角.png) no-repeat;
    		width: 18px;
    		height: 14px;
    		background-position: 5px 5px;
	}
	.yonghu{
		width: 24px;
   		 height: 28px;
		background: url(../assets/img1/icon.png) no-repeat;  
		background-position: 1px 5px; 
	}
	.banner-box {
		height: 44px;
		border-bottom: 2px solid #018DE2;
		clear: both;
	}	
	.banner-list {
		width: 1180px;
		height: 44px;
		margin: 0 auto;
		
	}
	.type {
		float: left;
		height: 46px;
		line-height: 44px;
		text-align: center;
		font-size: 16px;
		color: #fff;
		width: 175px;
		background-color: #018DE2;
		position: relative;
		z-index: 2;
	}

	.iconfont{
		background: url(../assets/img1/icons.png);
		display: inline-block;
   		background-repeat: no-repeat;
    	font-style: normal;
    	vertical-align: middle;
    	width: 30px;
    	height: 30px;
	    background-position: 6px -176px;
	    margin: 0 0 0 10px;
	    transition: all .3s ease;
	}
	ul{
		list-style: none;
	}
	.type>ul{
		margin: 0 0 0 215px;
    	height: 44px;
	}	
	#change{
		color: #f60;
	}
	.list{
		display: inline;
   		 padding: 0px 40px;
    		 height: 44px;
	    	 line-height: 44px;
	     font-size: 16px;
	     text-decoration: none;
    		 color: #676767;
	}
	.list:hover{
		color: #f60;
	}
	.last{
		float: right;
		position: relative;
	}
	.swiper-container {
   		width: 1920px;
	}
	.main-nav{
		position: absolute;
	    top: 46px;
	    left: 0;
	    float: left;
	    height: 470px;  
	}
	.nav-list{
		float: left;
    		width: 175px;
	    background: #404040;
	    height: 100%;
	    overflow: hidden;
	    padding: 0;
	}
	.nav-list>li{
		display: block;
	    color: #fff;
	    font-size: 14px;
	    text-align: left;
	    height: 52px;
	    line-height: 52px;
	    padding: 0px 30px;
	    text-decoration: none;
	    position: relative;
	    border-bottom: 1px solid #6a6a6a;
    		height: 52px;
	}
	.nav-list>li:hover{	
		background-color:#f60;
	}
	.nav-list span{
		display: block;
	    width: 52px;
	    height: 52px;
	    position: absolute;
	    top: 0;
	    right: 0;
	    background-position: 25px -444px;
        background-image: url(../assets/img1/icons.png);
	    background-repeat: no-repeat;
	    font-style: normal;
	}
	.second-nav{
		position: absolute;
	    top: 0px;
	    left: 175px;
	    width: 365px;
	    height: 440px;
	    background: rgba(0,0,0,.4);
	    padding: 15px 10px 15px 25px;
	    display: block;
	}
	.item-list{
		overflow: hidden;
    		max-height: 440px;
    		display: block;
    		padding: 0;
	}
	.item-list>li{
		float: left;
    	overflow: hidden;  		
	}
	.item-list>li>a:hover{
		color: #f60;
	}
	.item-list a{
		color: #fff;
	    font-size: 14px;
	    text-decoration: none;
	    height: 20px;
	    line-height: 20px;
	    margin: 3px 10px 3px 0;
	    overflow: hidden;
	    padding-right: 10px;
	    border-right: 1px solid #d3d3d3;
	}
	.server{
		border: 1px solid #D7D7D6;
	    padding: 10px;
	    position: absolute;
	    right: 0;
	    background: #fff;
	    width: 150px;
	    line-height: 0px;
	    z-index: 999;
	}
	.icon{
        background-image: url(../assets/img1/icons.png);
	    background-repeat: no-repeat;
	    font-style: normal;
	    float: left;
	    width: 20px;
	    height: 30px;
	    background-position: -59px 7px;
	    margin: 0 10px 0 30px;
	}
	
	.curr{
		display: block;
	    width: 13px;
	    height: 9px;
	    background-position: -473px -110px;
	    position: absolute;
	    top: -9px;
	    right: 20px;
	}
	.qq-server{
		display: block;
		height: 30px;
	    line-height: 30px;
	    color: #fff;
	    font-size: 14px;
	    padding: 0;
	    margin: 0 0 10px 0;
	    border-radius: 5px;
	    background: #ff6c00;
	    overflow: hidden;
	}
  	.qrcode{
  		width: 100%;
  	}
  	
</style>